@import "mixin";

body {
  background-color: #dc3838;
}

.main {
  margin: rem(50px) auto 0;
  padding-bottom: rem(16px);
  width: rem(355px);
  background-color: #fff;
  border-radius: rem(3px);
  >.header {
    position: relative;
    >.logo-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: rem(152px);
      height: rem(47px);
      background-color: #e9e6eb;
      border: rem(4px) solid #ffffff;
      border-radius: rem(51px);
      >img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
  >.gif-wrapper {
    padding-top: rem(40px);
    text-align: center;
    font-size: 0;
  }
  >.jump-title {
    margin: 0 rem(43px);
    @include border-bottom-1px(#e5e5e5);
    font-family: "PingFangSC";
    text-align: center;
    line-height: rem(41px);
    font-size: rem(14px);
    color: #333333;
  }
  >.content {
    width: 100%;
    >.info-wrapper {
      margin: 0 rem(43px);
      padding: rem(10px) 0;
      @include border-bottom-1px(#e5e5e5);
      >p {
        text-align: center;
        line-height: rem(20px);
        font-size: rem(12px);
        color: #999999;
        &.phone-number {
          font-weight: bold;
          line-height: rem(30px);
          font-size: rem(18px);
          color: #333333;
        }
      }
    }
    >.text-wrapper {
      margin: 0  rem(43px);
      padding: rem(15px) 0;
      >p {
        font-weight: bold;
        text-align: center;
        line-height: rem(20px);
        font-size: rem(13px);
        color: #dc3838;
        >.icon-mark {
          margin-right: rem(5px);
          display: inline-block;
          vertical-align: text-top;
          width: rem(15px);
          height: rem(15px);
          @include bg-image("../images/icon-mark")
        }
      }
      &.border-bottom {
        margin-bottom: rem(20px);
        @include border-bottom-1px(#e5e5e5);
      }
    }
    >.btn-wrapper {
      text-align: center;
      font-size: 0;
      >.btn {
        display: inline-block;
        width: rem(303px);
        height: rem(43px);
        line-height: rem(43px);
        background-color: #ffbb4a;
        border-radius: rem(4px);
        text-align: center;
        font-size: rem(13px);
        color: #ffffff;
      }
    }
  }
}

.platform-layer {
  position: relative;
  padding-top: rem(20px);
  width: rem(240px);
  height: rem(190px);
  background-color: #fff;
  border-radius: rem(3px);
  overflow: hidden;
  text-align: center;
  >h5 {
    line-height: rem(18px);
    font-size: rem(12px);
  }
  >.plat-logo {
    position: relative;
    width: 100%;
    height: rem(60px);
    >img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  >.text-wrapper {
    padding: 0 rem(30px);
  }
  >.bottom-wrapper {
    padding-top: rem(3px);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: rem(40px);
    background-color: #dc3838;
    box-sizing: border-box;
    >p {
      line-height: rem(16px);
      font-size: rem(12px);
      color: #ffffff;
    }
  }
  >.btn-wrapper {
    margin-top: rem(16px);
    padding: 0 rem(30px);
    >a {
      display: inline-block;
      width: 100%;
      height: rem(39px);
      line-height: rem(39px);
      text-align: center;
      background-color: #dc3838;
      border-radius: rem(5px);
      color: #ffffff;
      font-size: rem(16px);
    }
  }
  &.unjoint-platform {
    height: rem(190px);
  }
  &.joint-platform {
    height: rem(160px);
  }
  &.not-a-menber {
    height: rem(215px);
  }
}